class ActionContainer {
  renderAction(action, container) {
    const div = document.createElement('div');
    div.className = 'dropped-action';
    div.dataset.id = action.uuid;
    let html = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div onclick="selectActionByClick(event, '${action.uuid}')" style="flex: 1; cursor: pointer;">
           <span class="label-type">${this.getActionIcon(action.type)}</span><strong>${action.type}</strong>`;
    html += `</div>
          <button class="btn" onclick="ActionContainer.removeAction('${action.uuid}')" style="margin-left: 10px;">删除</button>
        </div>`;
    div.innerHTML = html;
    container.appendChild(div);
  }
  updateAction(action) {
    /*
     // 重新渲染字段 - 使用旧的key值查找元素
      const fieldElement = document.querySelector(`[data-key="${oldKey}"]`);
      if (fieldElement) {
        fieldElement.remove();
      }*/
    const actionDiv = document.querySelector(`[data-id="${action.uuid}"]`);
    if (actionDiv) {
      let html = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div onclick="selectActionByClick(event, '${action.uuid}')" style="flex: 1; cursor: pointer;">
           <span class="label-type">${this.getActionIcon(action.type)}</span><strong>${action.type}</strong>`;
      html += `</div>
          <button class="btn" onclick="removeAction('${action.uuid}')" style="margin-left: 10px;">删除</button>
        </div>`;
      actionDiv.innerHTML = html;
    }
  }
  // 删除动作
  removeAction(id) {
    let index = -1;
    let container = null;
    let parentActions=null;

    // 先在onLoad中查找
    index = formConfig.formConfig.onLoad.findIndex(a => a.uuid === id);
    if (index !== -1) {
      formConfig.formConfig.onLoad.splice(index, 1);
      container = DropZones.onloadContainer;
      parentActions=formConfig.formConfig.onLoad;
    }
    if (index === -1) {
      // 在onSave中查找
      index = formConfig.formConfig.onSave.findIndex(a => a.uuid === id);
      if (index !== -1) {
        formConfig.formConfig.onSave.splice(index, 1);
        container = DropZones.onsaveContainer;
        parentActions=formConfig.formConfig.onSave;
      }
    }
    if (index === -1) {
      // 在onSave中查找
      index = formConfig.formConfig.buttons.findIndex(a => a.uuid === id);
      if (index !== -1) {
        formConfig.formConfig.buttons.splice(index, 1);
        container = DropZones.buttonContainer;
        parentActions=formConfig.formConfig.buttons;
      }
    }
    if (index == -1 || container == null) return;

    // 重新渲染动作容器
    container.innerHTML = '';
    const actions = parentActions;
    actions.forEach(action => {
      ActionContainer.renderAction(action, container);
    });
    // 如果删除的是当前选中的动作，清空配置面板
    if (selectedItem && selectedItem.type === 'action' && selectedItem.data.id === id) {
      selectedItem = null;
      actionConfigPanel.innerHTML = '<p>请选择生命周期中的动作进行配置</p>';
    }
    updateJsonPreview();
  }

  // 为每种动作类型定义对应的图标
  getActionIcon(type) {
    const iconMap = {
      'fetch-model-data': '📡',          // 获取数据
      'field-transform': '🔧',     // 字段转换
      'map-locate': '🗺️',        // 映射动作
      'call-api': '🌐',           // 调用接口
      'fetch-select-options': '📋', // 获取下拉选项
      'upload-img': '🖼️',        // 上传图片
      'upload-file': '📎',        // 上传文件
      'save-model-data': '💾',     // 保存模型数据
      'insert-model-data': '➕',     // 新增模型数据
      'button-ok': '✅',          // 确认按钮
      'button-cancel': '❌',     // 取消按钮
      'button-close': '🔒',      // 关闭按钮
      'button-locate': '📍'      // 定位按钮
    };
    return iconMap[type] || '⚙️';   // 默认齿轮图标
  }
}
export default new ActionContainer;
